<template>
	<i :class="classes" :style="styles" @click="handleclick" />
</template>

<script lang="ts">
	import { Vue, Prop, Emit, Component } from "vue-property-decorator";
	const prefixCls = "ivu-icon";

	@Component
	export default class Icon extends Vue {
		@Prop({ type: String, default: "" }) public type!: string;
		@Prop({ type: String, default: "" }) public color!: string;
		@Prop({ type: [String, Number], default: 10 }) public size!: string | number;

		@Prop() custom: any;
		style = {
			fontSize: "",
			color: ""
		};

		get classes() {
			return [
				`${prefixCls}`,
				this.type,
				{
					[`${prefixCls}-${this.type}`]: this.type !== "",
					[`${this.custom}`]: this.custom !== ""
				}
			];
		}

		get styles() {
			if (this.size) {
				this.style.fontSize = `${this.size}px`;
			}

			if (this.color) {
				this.style.color = this.color;
			}

			return this.style;
		}
		@Emit()
		handleclick(e: Event) {
			this.$emit("click", e);
		}
	}
</script>

<style>
</style>